<template>
    <el-drawer v-model="drawer" title="动态修改" :with-header="false" @close="clean()">
        <el-form :model="bsNewModel" label-width="auto" style="max-width: 600px">
            <el-form-item label="标题">
                <el-input v-model="bsNewModel.title" />
            </el-form-item>
            <el-form-item label="分类">
                <el-select v-model="bsNewModel.newsType" placeholder="请选择分类">
                        <el-option label="党建新闻" value="0" />
                        <el-option label="政策法规" value="1" />
                        <el-option label="通知公告" value="2" />
                        <el-option label="行业信息" value="3" />
                        <el-option label="会员动态" value="4" />
                    </el-select>
            </el-form-item>
            <el-form-item label="缩略图">
                <el-upload
                    class="avatar-uploader"
                    action="http://localhost:8080/upload"
                    :show-file-list="false"
                     :headers="headers"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                >
                    <img v-if="bsNewModel.thumbnail" :src="bsNewModel.thumbnail" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="来源">
                <el-input v-model="bsNewModel.source" />
            </el-form-item>
            <el-form-item label="新闻内容">
                <MyWangEditor v-model="bsNewModel.content"></MyWangEditor>
            </el-form-item>
            <el-form-item label="是否置顶">
                <el-radio-group v-model="bsNewModel.topFlag" size="large">
                <el-radio-button label="是" value="1" />
                <el-radio-button label="否" value="0"/>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="状态">
                <el-radio-group v-model="bsNewModel.status" size="large">
                    <el-radio-button label="发布" value="1" />
                    <el-radio-button label="暂存" value="0"/>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">确定</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage,UploadProps  } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import MyWangEditor from './MyWangEditor.vue';

    const drawer = ref(false)
    const open = (row)=>{
        if(row){
            bsNewModel.value.id = row.id;
            bsNewModel.value.newsType = row.newsType;
            bsNewModel.value.title = row.title;
            bsNewModel.value.thumbnail = row.thumbnail;
            bsNewModel.value.soure = row.soure;
            bsNewModel.value.content = row.content;
            bsNewModel.value.topFlag = row.topFlag;
            bsNewModel.value.status = row.status;
        }
        drawer.value = true
        
    }



    const bsNewModel = ref({
        "id":null,
        "newsType":null,
        "title":"",
        "thumbnail":"",
        "soure":"",
        "content":"",
        "topFlag":null,
        "status":null,
    })



    // 暴露给外面使用
    defineExpose({
        open
    })

    //图片上传
    const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
    ) => {
        bsNewModel.value.thumbnail = URL.createObjectURL(uploadFile.raw!)
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
    }


    //新增编辑方法
    import { newUpdateService,newInsertService } from '../api/guild/bsNews';
    const submitForm = async()=>{
        if(bsNewModel.value.id){
            let result = await newUpdateService(bsNewModel.value)
        }else{
            let result = await newInsertService(bsNewModel.value)
        }
        drawer.value = false
        bsNewModel.value.id = null;
        bsNewModel.value.newsType = "";
        bsNewModel.value.title = "";
        bsNewModel.value.thumbnail = "";
        bsNewModel.value.soure = "";
        bsNewModel.value.content = "";
        bsNewModel.value.topFlag = null;
        bsNewModel.value.status = null;

    }

    const clean = ()=>{
        bsNewModel.value.id = null;
        bsNewModel.value.newsType = "";
        bsNewModel.value.title = "";
        bsNewModel.value.thumbnail = "";
        bsNewModel.value.soure = "";
        bsNewModel.value.content = "";
        bsNewModel.value.topFlag = null;
        bsNewModel.value.status = null;
    }

    //文件上传请求头token设置
    const headers = ref({
        "token":localStorage.getItem('token')
    }) 
</script>
<style scoped>
    .avatar-uploader .avatar {
        width: 130px;
        height: 130px;
        display: block;
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 130px;
        height: 130px;
        text-align: center;
    }
</style>